﻿@namespace AspireFyh.AntdWebApp.Pages.User
@layout UserLayout
@page "/user/login"

<div class="main__b__0" >
    <div class="login" style="justify-content: center">
        <div class="loginBox" style="width: 80%;display: flex;height: 800px;border-radius: 24px;padding: 20px;margin: 60px auto 0;background: #fff">
            <div class="left" style="width: 50%;background: white;height: 100%;padding: 30px 80px;box-sizing: border-box;float: left">
                <div class="tit" style="font-size: 28px;font-weight:bold;color: #000;text-align: center;margin-bottom: 20px">用户登录</div>
                <Form Model="@_model" OnFinish="HandleSubmit">
                    <Tabs ActiveKey="@context.LoginType">
                        <TabPane Key="1" Tab="账号登录">
                            <FormItem>
                                <AntDesign.Input Placeholder="用户名: admin 或 user" Size="large" @bind-Value="@context.UserName">
                                    <Prefix>
                                        <Icon Type="user"/>
                                    </Prefix>
                                </AntDesign.Input>
                            </FormItem>
                            <FormItem>
                                <AntDesign.Input Placeholder="密码: ant.design" Size="large" @bind-Value="@context.Password" Type="password">
                                    <Prefix>
                                        <Icon Type="lock"/>
                                    </Prefix>
                                </AntDesign.Input>
                            </FormItem>
                        </TabPane>
                        <TabPane Key="2" Tab="手机登录">
                            <FormItem>
                                <AntDesign.Input Placeholder="电话号码" Size="large" @bind-Value="@context.Mobile">
                                    <Prefix>
                                        <Icon Type="mobile"/>
                                    </Prefix>
                                </AntDesign.Input>
                            </FormItem>
                            <FormItem>
                                <Row Gutter="8">
                                    <AntDesign.Col Span="16">
                                        <AntDesign.Input Placeholder="填写验证码" Size="large" @bind-Value="@context.Captcha">
                                            <Prefix>
                                                <Icon Type="mail"/>
                                            </Prefix>
                                        </AntDesign.Input>
                                    </AntDesign.Col>
                                    <AntDesign.Col Span="8">
                                        <Button Size="large" Block OnClick="GetCaptcha">发送验证码</Button>
                                    </AntDesign.Col>
                                </Row>
                            </FormItem>
                        </TabPane>
                    </Tabs>
                    <div>
                        <Checkbox Checked="@context.AutoLogin">
                            自动登录
                        </Checkbox>
                        <a style="float: right;">
                            忘记密码
                        </a>
                    </div>
                    <Button Type="primary" HtmlType="submit" Class="submit" Size="large" Block>登录 </Button>
                    <div class="other">
                        @* Other Login Methods *@
                        @* <Icon Class="icon" Type="alipay-circle"/> *@
                        @* <Icon Class="icon" Type="taobao-circle"/> *@
                        @* <Icon Class="icon" Type="weibo-circle"/> *@
                        <a class="register" href="/user/register">注册账号</a>
                    </div>
                </Form>
            </div>
            <div class="right" style="width: 50%;background: #EDF0F5;display: flex;align-items: center;justify-content: center;height: 100%;float: left">
                <img src="assets/img/loginRight.png" alt="loginRight" style="width: 90%">
            </div>
        </div>
    </div>
</div>